<template>
  <a-card :bordered="false">
    <a-tabs v-model="activeKey">
      <a-tab-pane tab="最优成本代价模型" key="1">
        <model ref="airModel" type="DATACENTER_COST" v-if="activeKey === '1'"/>
      </a-tab-pane>

      <a-tab-pane tab="最优设备代价模型" key="2">
        <model ref="upsModel" type="DATACENTER_DEVICE" v-if="activeKey === '2'" />
      </a-tab-pane>

      <a-tab-pane tab="最优能耗代价模型" key="3">
        <model ref="upsModel" type="DATACENTER_POWER" v-if="activeKey === '3'" />
      </a-tab-pane>

      <a-tab-pane tab="配电子网均衡代价模型" key="4">
        <model ref="upsModel" type="DATACENTER_ELECTRIC" v-if="activeKey === '4'" />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import Model from './Model'
export default {
  name: 'F010304',
  components: {
    Model,
  },
  data() {
    return {
      activeKey: "1",
    }
  },
  created() {},
  methods: {
    handleTabChange() {
      let key = this.activeKey;
      if (key === '1' && this.$refs.airModel) {
        this.$refs.airModel.loadData();
      } else if (key === '2' && this.$refs.upsModel) {
        this.$refs.upsModel.loadData();
      }
    },
  },
}
</script>
